const state = {
    showAppBar: false,
    appBarTitle: '',
    userInfo: null,
    conHeight: 0,
}

// getters
const getters = {
    getShellEnv: (string, getters) => {
        return state.showAppBar;
    },
    getAppBarTitle: (string, getters) => {
        return state.appBarTitle;
    },
    getUserInfo: (string, getters) => {
        return state.userInfo;
    },
    getConHeight: (string, getters) => {
        return state.conHeight.toString();
    }
}

// actions
const actions = {
    setShellEnv({ commit, state }, arg) {
        commit('updateShellEnv', arg);
    },
    setAppBarTitle({ commit, state }, arg) {
        commit('updateAppBarTitle', arg);
    },
    setUserInfo({ commit, state }, arg) {
        commit('updateUserInfo', arg);
    },
    setConHeight({ commit, state }, arg) {
        let vHeader = document.querySelector('#vHeader') ? document.querySelector('#vHeader').offsetHeight : 0,
            vProgress = document.querySelector('#vProgress') ? document.querySelector('#vProgress').offsetHeight : 0,
            vFooter = document.querySelector('#vFooter') ? document.querySelector('#vFooter').offsetHeight : 0,
            vBBar = document.querySelector('#detailBottom') ? document.querySelector('#detailBottom').offsetHeight : 0,
            vBar = document.querySelector('#vBar') ? document.querySelector('#vBar').offsetHeight : 0,
            vBBInfoCard = document.querySelector('.car-bbinfo-card') ? document.querySelector('.car-bbinfo-card').offsetHeight : 0,
            vBBtitle = document.querySelector('.bbtitle') ? document.querySelector('.bbtitle').offsetHeight : 0,
            vSearch = document.querySelector('.m-sech-wrap') ? document.querySelector('.m-sech-wrap').offsetHeight : 0,
            vTab = document.querySelector('.vuxTab') ? document.querySelector('.vuxTab').offsetHeight : 0,
            vExcep = document.querySelector('.excep') ? document.querySelector('.excep').offsetHeight : 0,
            vWrap = document.querySelector('#vWrap') ? document.querySelector('#vWrap').offsetHeight : 0,
            vFbtn = document.querySelector('.form-btn') ? document.querySelector('.form-btn').offsetHeight : 0;

        if (getStyle('.car-bbinfo-card', 'marginBottom') > 0) {
            vBBInfoCard += getStyle('.car-bbinfo-card', 'marginBottom');
        }

        if (getStyle('.bbtitle', 'marginBottom') > 0) {
            vBBtitle += getStyle('.bbtitle', 'marginBottom');
        }

        if (getStyle('.excep', 'marginBottom') > 0) {
            vExcep += getStyle('.excep', 'marginBottom');
        }

        commit('updateConHeight', 0 - (vHeader + vProgress + vFooter + vBar + vBBar + vBBtitle + vBBInfoCard + vSearch + vTab + vExcep + vWrap + vFbtn));

        function getStyle(arg, attr) {
            let obj = document.querySelector(arg);
            if (obj) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr].replace('px', '') * 1;
                } else {
                    return document.defaultView.getComputedStyle(obj, null)[attr].replace('px', '') * 1;
                }
            } else {
                return 0;
            }
        }
    },
}

// mutations
//更新当前使用环境
const mutations = {
    updateShellEnv(state, arg) {
        state.showAppBar = arg;
    },
    updateAppBarTitle(state, arg) {
        state.appBarTitle = arg;
    },
    updateUserInfo(state, arg) {
        state.userInfo = arg;
    },
    updateConHeight(state, arg) {
        state.conHeight = arg;
    },
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}